<template>
  <div class="nav-bar">
    <div class="common left" @click="handleBack">
      <div class="iconfont icon-31fanhui1"></div>
    </div>
    <div class="common center">{{ route.meta.title }}</div>
    <div class="common right" @click="handleHome">
      <div class="iconfont icon-1"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

console.log(route);

const emit = defineEmits(['router-back', 'router-home']);

const handleBack = () => {
  // console.log(router);
  //  返回上一页
  router.back();
  emit('router-back');
}

const handleHome = () => {
  //  返回首页
  // location.href = location.origin;
  emit('router-home');
}
</script>

<style lang="scss" scoped>
.nav-bar {
  display: flex;
  height: 5rem;
  font-size: 1.6rem;

  .common {
    text-align: center;
    line-height: 5rem;
  }

  .left {
    background: red;
    width: 5rem;
  }

  .center {
    flex: 1;
  }

  .right {
    background: red;
    width: 5rem;
  }
}
</style>